import React, { useState } from 'react';
import { Divider, Table } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import InvoiceTabs from '../../../components/InvoiceTabs';
import { Card, Input, Button, Form, DatePicker, Modal } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
 


type SearchParams = {
  keyword?: string;
  consignee?: string;
  timeRange?: [dayjs.Dayjs, dayjs.Dayjs];
};

interface DataType {
  key: React.Key;
  name: string;
  hetong: string;
  shifadi: string;
  mudidi: string;
  shouhuofang: string;
  huowumingcheng: string;
  zhongliang: string;
  yunshufei: string;
  jiesuantime: string;
  kaipiaozhuangtai:string;
  kaipiaojin:string;
}

const columns: TableColumnsType<DataType> = [
  {
    title: '订单号',
    dataIndex: 'key',
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: '下单时间',
    dataIndex: 'name',
  },
  {
    title: '合同编号',
    dataIndex: 'hetong',
  },
  {
    title: '始发地',
    dataIndex: 'shifadi',
  },
  {
    title: '目的地',
    dataIndex: 'mudidi',
  },
  {
    title: '收货方',
    dataIndex: 'shouhuofang',
  },
  {
    title: '货物名称',
    dataIndex: 'huowumingcheng',
  },
  {
    title: '重量kg',
    dataIndex: 'zhongliang',
  },
  {
    title: '运输费（￥）',
    dataIndex: 'yunshufei',
  },
  {
    title: '结算时间',
    dataIndex: 'jiesuantime',
  },
  {
    title: '开票状态',
    dataIndex: 'kaipiaozhuangtai',
  },
  {
    title: '开票金',
    dataIndex: 'kaipiaojin',
  },
];

const data: DataType[] = [
  {
    key: '2342342341',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
  {
    key: '234234241',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
  {
    key: '3242342341',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
  {
    key: '3243242343241',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
  {
    key: '234234234231',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
  {
    key: '534242341',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
  {
    key: '14214124214',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
  {
    key: '13124124124',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
  {
    key: '141421412',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
  {
    key: '3123441231',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
  {
    key: '1312312312',
    name: '2025/3/31/10:09:21:42',
    hetong: 'HCF2025040403',
    shifadi: '北京市',
    mudidi: '上海市',
    shouhuofang: '张三',
    huowumingcheng: '白糖糖精',
    zhongliang: '100',
    yunshufei: '12540.00',
    jiesuantime: '2025/3/31/10:09:21:42',
    kaipiaozhuangtai:'已开票',
    kaipiaojin:'1000'
  },
 
];
// rowSelection object indicates the need for row selection
const rowSelection: TableProps<DataType>['rowSelection'] = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
export default function Index() {
    type RowSelectionType = 'checkbox' | 'radio';
    const [selectionType, ] = useState<RowSelectionType>('radio');
    const [form] = Form.useForm<SearchParams>();
    const [consigneeModalOpen, setConsigneeModalOpen] = useState(false);
    const [timeRangeModalOpen, setTimeRangeModalOpen] = useState(false);
  
    const onFinish = (values: SearchParams) => {
      console.log('搜索参数:', values);
      // 这里处理搜索逻辑
    };
  
    // 禁用未来日期
    const disabledDate: RangePickerProps['disabledDate'] = (current) => {
      return current && current > dayjs().endOf('day');
    };
    // 跳转详情页
  
  return (
    <div>
      <InvoiceTabs />
      <Card 
      bordered={false} 
      bodyStyle={{ padding: '16px 24px' }}
      style={{ marginBottom: 24 }}
    >
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
        <span style={{ marginRight: 16 }}>共 283 条</span>
        <Input.Search
          placeholder="请输入关键词"
          style={{ width: 200 }}
          allowClear
          onSearch={(value) => form.setFieldValue('keyword', value)}
        />
      </div>

      <Form form={form} layout="inline" onFinish={onFinish}>
        {/* 收货人筛选 */}
        <Form.Item name="consignee">
          <Button 
            type={form.getFieldValue('consignee') ? 'primary' : 'default'}
            onClick={() => setConsigneeModalOpen(true)}
          >
            收货人{form.getFieldValue('consignee') && `: ${form.getFieldValue('consignee')}`}
          </Button>
        </Form.Item>

        {/* 时间范围筛选 */}
        <Form.Item name="timeRange">
          <Button 
            type={form.getFieldValue('timeRange') ? 'primary' : 'default'}
            onClick={() => setTimeRangeModalOpen(true)}
          >
            下单时间
            {form.getFieldValue('timeRange') && `: ${form.getFieldValue('timeRange')[0].format('YYYY-MM-DD')} ~ ${form.getFieldValue('timeRange')[1].format('YYYY-MM-DD')}`}
          </Button>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>

      {/* 收货人弹窗 */}
      <Modal
        title="收货人筛选"
        open={consigneeModalOpen}
        onCancel={() => setConsigneeModalOpen(false)}
        onOk={() => {
          form.submit();
          setConsigneeModalOpen(false);
        }}
        destroyOnClose
      >
        <Form form={form} layout="vertical">
          <Form.Item 
            name="consignee" 
            label="收货人"
            extra="请输入关键词筛选收货人"
          >
            <Input placeholder="请输入收货人姓名或关键词" />
          </Form.Item>
        </Form>
      </Modal>

      {/* 时间范围弹窗 */}
      <Modal
        title="下单时间筛选"
        open={timeRangeModalOpen}
        onCancel={() => setTimeRangeModalOpen(false)}
        onOk={() => {
          form.submit();
          setTimeRangeModalOpen(false);
        }}
        destroyOnClose
      >
        <Form form={form} layout="vertical">
          <Form.Item 
            name="timeRange" 
            label="时间范围"
            extra="请选择开始和结束时间"
          >
            <DatePicker.RangePicker
              style={{ width: '100%' }}
              disabledDate={disabledDate}
              presets={[
                { label: '今天', value: [dayjs(), dayjs()] },
                { label: '本周', value: [dayjs().startOf('week'), dayjs().endOf('week')] },
                { label: '本月', value: [dayjs().startOf('month'), dayjs().endOf('month')] },
                { label: '今年', value: [dayjs().startOf('year'), dayjs().endOf('year')] },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
    </Card>
      <Divider />
      <Table<DataType>
        rowSelection={{ type: selectionType, ...rowSelection }}
        columns={columns}
        dataSource={data}
      />
    </div>
  )
}